<!--
/* 计算资源组件 
 * Author:      yangjq 
 * CreateTime:  2023/9/7 16:24:15 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:30:58 
 * Description: 
*/ 
-->
<template>
  <div class="main-card">
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 25%;">
      <img src="/images/screen-it/计算资源-B.png" style="height: 80px; width: 80px;" />
      <div style="font-size: 20px; margin-top: 10px">计算资源</div>
      <div style="font-size: 12px; margin-top: 0px">{{IndexLabel}}</div>
    </div>
    <div style="width: 75%;padding-left: 4px;">
      <!-- <el-carousel style="height: 100%; width: 100%;overflow-y:hidden;" indicator-position="outside" interval="10000" @change="doPlay">
        <el-carousel-item> -->
          <div style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: start">
            <div class="part-container">
              <img src="/images/screen-it/CPU-B.png" class="part-icon"/>
              <span class="part-header">CPU:</span>
              <span class="part-content led-cls" style="color:#E062AE;">
                <span class="data-focus">{{ computingData.nowCores }}</span>
                <span class="data-normal">/{{ computingData.countCores }}</span>
              </span>
              <span class="part-footer"> 核</span>
            </div>
            <div class="part-container">
              <img src="/images/screen-it/内存-B.png" class="part-icon"/>
              <span class="part-header">内存:</span>
              <span class="part-content led-cls" style="color:#fb7293;">
                <span class="data-focus">{{ computingData.nowMemory }}</span>
                <span class="data-normal">/{{ computingData.countMemory }}</span>
              </span>
              <span class="part-footer"> GB</span>
            </div>
            <div class="part-container">
              <img src="/images/screen-it/计算-B.png" class="part-icon"/>
              <span class="part-header">每秒浮点计算:</span>
              <span class="part-content led-cls" style="color:#32c5e9;">
                <span class="data-focus">{{ computingData.floatCalc }}</span>
              </span>
              <span class="part-footer"> 次/秒</span>
            </div>
          </div>
        <!-- </el-carousel-item>
      </el-carousel> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, Ref, reactive, watchEffect, onMounted,onUnmounted, watch} from 'vue';
import {defHttp} from "/@/utils/http/axios";

const IndexLabel = ref('(算力)');
const doPlay = (value) => {
  if(value==0){
    IndexLabel.value = '(算力)';
    return;
  }

  if(value==1){
    IndexLabel.value = '(品牌)';
    return;
  }
};

const computingData = ref({
  nowCores: 2300,
  countCores: 4500,
  nowMemory: 3600,
  countMemory: 7000,
  floatCalc: 5800
})


function loadData() {
  let api = "/j_monitoring/licenseSoftware/readComputingSettingJson";
  let params = {};
  let options = {isTransformResponse: false};
  defHttp.get({url: api, params}, options)
    .then((res) => {
      if (res.success) {
        let record = JSON.parse(res.result.value)
        Object.assign(computingData.value, record)        
      } else {
        console.log('接口错误用默认');
      }
    }).finally(() => {

  });
  // initCharts();
};

let timer;
onMounted(() => {
  loadData();
  timer = setInterval(() => {
    loadData();
  }, 60*60000); // 根据需要调整滚动间隔
});

onUnmounted(()=>{
  if(timer){
    clearInterval(timer);
  }
});
</script>

<style scoped lang="less">
  .main-card {
    display: flex; 
    flex-direction: row; 
    color: whitesmoke; 
    height: 100%; 
    width: 100%; 
    padding: 10px;
  }
  .part-container {
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: baseline;
    font-size: 20px;
  }
  .part-content{
    color: #d93d09;
    font-weight: 400;
    font-size: 22px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .part-icon {
    width: 24px;
    height: 24px;
    margin-top: 16px;
    margin-right: 8px;
  }

  .part-header {
    font-weight: normal;
    font-size: 20px;
  }

  .part-footer {
    font-weight: normal;
    font-size: 16px;
  }

  .data-focus {
    font-size: 2.2rem;
    font-weight: 500;
  }

  .data-normal {
    font-size: 1.8rem;
    font-weight: 400;
    opacity: 0.8;
  }

  .led-cls {
    font-family: 'electronicFont';    
  }

  .rightContent {
    width: 75%; 
    padding-left: 4px;
  }
</style>
